<template>
  <div>
    <div class="box">
      <div style="text-align: right; margin: 20px 20px;">
        <el-button class="back" icon="el-icon-arrow-left" type="primary" @click="go">返回</el-button>

      </div>
      <el-divider></el-divider>
      <div class="box-header">
        <div style="color: red;">
          当前订单状态:
          <span v-if="forms.orderInfo.orderStatus == 1" >待支付</span>
          <span v-if="forms.orderInfo.orderStatus  == 2" >已完成</span>
          <span v-if="forms.orderInfo.orderStatus  == 3">已失效</span>
          <span v-if="forms.orderInfo.orderStatus  == 4" >已关闭</span>
        </div>
        <div style="display: flex;">
          <el-button v-if="forms.orderInfo.orderStatus  == 1" @click="userClick">修改用户信息</el-button>
          <el-button v-if="forms.orderInfo.orderStatus  == 2" @click="basicClick">修改基本信息</el-button>
          <el-button @click="remarkClick">备注订单</el-button>
          <el-button v-if="forms.orderInfo.orderStatus  == 1" @click="closeClick">关闭订单</el-button>
        </div>
      </div>
      <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible" width="20%">
        <el-form :model="form">
          <el-form-item label="用户姓名" label-width="240px">
            <el-input style="width: 240px;" v-model="form.name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号码" label-width="240px">
            <el-input style="width: 240px;" v-model="form.phoneNumber" placeholder="请输入手机号"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" label-width="240px">
            <el-input style="width: 240px;" placeholder="请输入邮箱" v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注信息" label-width="240px">
            <el-input style="width: 240px;" type="textarea" placeholder="请输入备注信息" v-model="form.remark"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="clickOpen">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改基本信息" :visible.sync="basicShow" width="20%" @close="openClick">
        <el-form :model="form">
          <el-form-item label="所属上级" label-width="240px">
            <el-input style="width: 240px;" v-model="form.nameId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单来源" label-width="240px">
            <el-select v-model="form.userorder">
              <el-option v-for="item in sources" :key="item.id" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式" label-width="240px">
            <el-select v-model="form.payData">
              <el-option v-for="item in paydata" :key="item.id" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注信息" label-width="240px">
            <el-input style="width: 240px;" type="textarea" placeholder="请输入备注信息" v-model="form.remarks"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="basicShow = false">取 消</el-button>
          <el-button type="primary" @click="basicShowOpen">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 备注订单 -->
      <el-dialog title="备注订单" :visible.sync="dialogFormVisibles" width="20%">
        <el-form :model="form">

          <el-form-item label="操作备注" label-width="240px">
            <el-input style="width: 240px;" type="textarea" placeholder="请输入备注信息" v-model="form.adminRemark"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="dialogFormVisibles = false">取 消</el-button>
          <el-button type="primary" @click="clickOpens">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 关闭订单 -->
      <el-dialog title="关闭订单" :visible.sync="dialogFormVisibleCLose" width="20%">
        <el-form :model="form">

          <el-form-item label="操作备注" label-width="240px">
            <el-input style="width: 240px;" type="textarea" placeholder="请输入备注信息" v-model="form.close"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="dialogFormVisibleCLose = false">取 消</el-button>
          <el-button type="primary" @click="closeOpens">确 定</el-button>
        </div>
      </el-dialog>
      <el-divider></el-divider>
      <!-- 基本信息 -->
      <div style="display: flex; align-items: center; margin-left: 20px;">
        <div>
          <img style="width: 20px; height: 25px; vertical-align: middle;" src="../../../assets/images/fishInfo.png"
            alt="" />
        </div>
        <div style="margin-left: 10px;  font-weight: 700;">基本信息</div>
      </div>
      <el-divider></el-divider>
      <el-form ref="forms.orderInfo" :model="forms.orderInfo" label-width="100px">
        <el-form-item label="订单编号  :">
          <el-input v-model="forms.orderInfo.orderNo" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="下单时间  :">
          <el-input v-model="forms.orderInfo.createTime" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户ID  :">
          <el-input v-model="forms.orderInfo.userId" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单上级ID  :">
          <el-input v-model="forms.orderInfo.sellerSource" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="租赁属性  :">
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.attribute == 1">赁3年获得40000元人民币</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.attribute == 2">租赁3年鱼获自行处理</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.attribute == 3">租赁3年获得2400斤鱼</span>
        </el-form-item>
        <el-form-item label="起租日期  :">
          <el-input v-model="forms.orderInfo.createTime" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="截至日期  :">
    <el-input v-model="forms.createTime" style="width: 15%;"></el-input>
  </el-form-item> -->
        <el-form-item label="订单来源  :">
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.sourceType == 'web'">浏览器订单</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.sourceType == 'android'">安卓订单</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.sourceType == 'ios'">ios订单</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.sourceType == 'wxweb'">微信内置浏览器订单</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.sourceType == 'wxmini'">微信小程序订单</span>

        </el-form-item>
        <el-form-item label="支付方式  :">
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.paymentMode == 'wechatpay'">微信支付</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.paymentMode == 'alipay'">支付宝支付</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.paymentMode == 'bytedancepay'">字节跳动支付</span>

        </el-form-item>
        <el-form-item label="订单状态  :">
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.orderStatus == 1">待支付</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.orderStatus == 2">已完成</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.orderStatus== 3">已失效</span>
          <span  style="padding: 0 17px;" v-if="forms.orderInfo.orderStatus == 4">已关闭</span>

        </el-form-item>
      </el-form>



      <el-divider></el-divider>
      <!-- 用户信息 -->
      <div style="display: flex; align-items: center; margin-left: 20px;">
        <div>
          <img style="width: 20px; height: 25px; vertical-align: middle;" src="../../../assets/images/fishInfo.png"
            alt="" />
        </div>
        <div style="margin-left: 10px;  font-weight: 700;">用户信息</div>
      </div>
      <el-divider></el-divider>
      <el-form ref="forms" :model="forms" label-width="100px">
        <el-form-item label="姓名  :">
          <el-input v-model="forms.orderInfo.realName" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话号码  :">
          <el-input v-model="forms.orderInfo.phoneNumber" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱  :">
          <el-input v-model="forms.orderInfo.email" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注信息  :">
          <el-input v-model="forms.orderInfo.remark"  type="textarea" style="width: 15%;" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>

      <!-- 商品信息 -->
      <div style="display: flex; align-items: center; margin-left: 20px;">
        <div>
          <img style="width: 20px; height: 25px; vertical-align: middle;" src="../../../assets/images/fishInfo.png"
            alt="" />
        </div>
        <div style="margin-left: 10px ;  font-weight: 700;">商品信息</div>
      </div>
      <el-divider></el-divider>
     
      <el-table border :data="forms.goodsInfoVOList" style="width: 100%" align="center" :header-cell-style="{ 
      background:'#e2d2d2',color:'#000000'}">
        <el-table-column prop="goodsImg" label="商品图片" align="center" width="150">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="click">
              <a :href="scope.row.goodsImg" target="_blank" title="查看最大化图片">
                <img :src="scope.row.goodsImg" style="width: 200px;height: 200px">
              </a>
              <img slot="reference" :src="scope.row.goodsImg" style="width: 80px;height: 80px; cursor:pointer">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="reservoirName" label="所属水库" align="center"></el-table-column>
        <el-table-column prop="number" label="数量" align="center"></el-table-column>
        <el-table-column prop="fishPartyStockNum" label="库存" align="center"></el-table-column>
        <el-table-column prop="subtotal" label="小计" align="center"></el-table-column>
        <el-table-column label="合计" align="center">
          <template slot-scope="scope">
            <span style="color: red;">￥{{ scope.row.subtotal }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-divider></el-divider>
      <!-- 发票信息 -->
      <div v-if="forms.invoiceInfo">
      <div style="display: flex; align-items: center; margin-left: 20px;">
        <div>
          <img style="width: 20px; height: 25px; vertical-align: middle;" src="../../../assets/images/fishInfo.png"
            alt="" />
        </div>
        <div style="margin-left: 10px;  font-weight: 700;">发票信息</div>
      </div>
      <el-divider></el-divider>
      <el-form  ref="forms.invoiceInfo" :model="forms.invoiceInfo" label-width="100px">
        <el-form-item label="发票类型  :">
          <span  style="padding: 0 17px;" v-if="forms.invoiceInfo.type==1">电子发票 </span>
          <span  style="padding: 0 17px;" v-if="forms.invoiceInfo.type==2">纸质发票</span>
        </el-form-item>
        <el-form-item label="发票抬头  :">
          <el-input v-model="forms.invoiceInfo.header" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="税号  :">
          <el-input v-model="forms.invoiceInfo.dutyParagraph" style="width: 15%;" disabled></el-input>
        </el-form-item>
        <el-form-item label="地址  :" v-if="forms.invoiceInfo.type==2">
          <span  style="padding: 0 17px;">{{forms.invoiceInfo.address}} {{forms.invoiceInfo.detailAddress}}</span>
        </el-form-item>
        <el-form-item label="邮箱  :" v-if="forms.invoiceInfo.type==1">
          <el-input v-model="forms.invoiceInfo.email" style="width: 15%;" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
      <el-divider></el-divider>
      <!-- 操作信息 -->
      <div style="display: flex; align-items: center; margin-left: 20px;">
        <div>
          <img style="width: 20px; height: 25px; vertical-align: middle;" src="../../../assets/images/fishInfo.png"
            alt="" />
        </div>
        <div style="margin-left: 10px; font-weight: 700;">操作信息</div>
      </div>
      <el-divider></el-divider>
      <el-table border :data="forms.orderRecords" style="width: 100%" align="center" :header-cell-style="{ 
      background:'#e2d2d2',color:'#000000'}">
        <el-table-column prop="operator" label="操作者" align="center" ></el-table-column>
        <el-table-column prop="createTime" label="操作时间" align="center"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" align="center"></el-table-column>
        <el-table-column prop="paymentStatus" label="付款状态" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  orderDetail,
  updateUserInfo,
  closeOrder,
  updateRemark,
  updateBaseInfo,
} from "@/api/user";
import { Toast } from "vant";
import { log } from 'console';
export default {
  data() {
    return {
      orderId: "",
      phoneNumber: "", //
      dialogFormVisible: false,
      basicShow: false,
      dialogFormVisibles: false,
      dialogFormVisibleCLose: false,
      form: {
        name: "", //修改用户姓名（不可修改，只展示）
        phoneNumber: "", //修改用户手机号
        email: "", //修改用户邮箱
        remark: "", //修改用户备注信息
        id: "", // 订单id
        adminRemark: "", //  管理备注
        close: "", //关闭订单备注
        userorder: [], //订单来源
        payData: [], //支付方式
        nameId: "", //所属上级ID
        remarks: "", //修改基本信息之备注
      },
      sources: [
        { id: 1, value: "web", name: "浏览器" },
        { id: 2, value: "android", name: "安卓" },
        { id: 3, value: "ios", name: "苹果" },
        { id: 4, value: "wxweb", name: "微信内置浏览器" },
        { id: 5, value: "wxmini", name: "微信小程序" },
      ],
      paydata: [
        { id: 1, value: "wechatpay", name: "微信支付" },
        { id: 2, value: "alipay", name: "支付宝" },
        { id: 3, value: "bytedancepay", name: "字节跳动" },
        { id: 4, value: "offlinePay", name: "线下支付" },
      ],
      forms: {
        orderInfo:{orderNo:''},
        nvoiceInfo:{type:''}
      },
      formData:{}
    };
  },
  created() {
    this.orderId = this.$route.query.e;
    this.orderDetail();
  },
  methods: {
    // 修改基本信息确认按钮
    async basicShowOpen(e) {
      let data = {
        orderId: this.orderId,
        paymentMode: this.form.payData,
        remark: this.form.remarks,
        saleUserId: this.form.nameId,
        sourceType: this.form.userorder,
      };
      let result = await updateBaseInfo(data);
      if (result.code == 0) {
        Toast.success("编辑基本信息成功");
        this.basicShow = false;
      } else {
        Toast.fail("编辑基本信息失败,请稍后再试");
      }
    },
    // 修改基本信息
    basicClick() {
      this.basicShow = true;
    },
    // 修改用户信息
    userClick() {
      this.dialogFormVisible = true;
    },
    // 备注信息按钮
    remarkClick() {
      this.dialogFormVisibles = true;
    },
    // 关闭订单按钮
    closeClick() {
      this.dialogFormVisibleCLose = true;
    },
    // 关闭订单确认按钮
    async closeOpens() {
      let data = {
        orderId: this.form.id,
        remark: this.form.close,
      };
      let result = await closeOrder(data);
      if (result.code == 0) {
        Toast.success("订单关闭成功");
        this.dialogFormVisibleCLose = false;
        this.$router.go(-1);
      } else {
        Toast.fail("订单关闭失败");
      }
    },
    // 备注订单确定按钮
    async clickOpens() {
      let data = {
        orderId: this.form.id,
        remark: this.form.remarks,
      };
      console.log("data", data);
      let result = await updateRemark(data);
      if (result.code == 0) {
        Toast.success("修改备注信息成功");
        this.dialogFormVisibles = false;
      } else {
        Toast.fail("修改备注信息失败");
      }
      console.log(result);
    },
    // 修改用户信息确定按钮
    async clickOpen() {
      let data = {
        orderId: this.form.id,
        phoneNumber: this.form.phoneNumber,
        email: this.form.email,
        remark: this.form.remark,
      };

      let result = await updateUserInfo(data);
      if (result.code == 0) {
        Toast.success("修改用户信息成功");
        this.dialogFormVisible = false;
      } else {
        Toast.fail("修改用户信息失败");
      }
    },
    // 返回
    go() {
      this.$router.go(-1);
    },
    // 订单详情
    async orderDetail() {
      let data = {
        orderId: this.orderId,
      };
      let result = await orderDetail(data);
      if (result.code == 0) {
        this.forms = result.data;
        this.orderInfo = result.data.orderRecords;
        this.VOListData = result.data.goodsInfoVOList;
        this.form.name = result.data.orderInfo.realName;
        this.form.phoneNumber = result.data.orderInfo.phoneNumber;
        this.form.email = result.data.orderInfo.email;
        this.form.remark = result.data.orderInfo.remark;
        this.form.id = result.data.orderInfo.id;
        this.form.adminRemark = result.data.orderInfo.adminRemark;
        this.form.nameId = result.data.orderInfo.sellerSource;
        this.form.payData = result.data.orderInfo.paymentMode;
        this.form.userorder = result.data.orderInfo.sourceType;
        this.RecordsData = result.data.orderRecords;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #070707;
    cursor: not-allowed;
}
v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  background: #ccc;
}

.boder {
  border-collapse: collapse;
  width: 96%;
  text-align: center;
  height: 150px;
  margin: 0 auto;
}

th {
  background-color: #f9fafc;
}

td {
  width: 200px;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
}

::v-deep .van-uploader__wrapper {
  display: block;
}

.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 20px auto;
}
</style>
